<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
   列表的渲染
     v-for
     如果后续动态渲染的机构比较复杂，建议给动态渲染的节点添加一个标识 key  便于后续vue对于节点的管理   key要唯一

     为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key
     建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单
-->
<div id="app">
    <h1>{{message}}</h1>
    <ul>
<!--        for 循环   形式参数的名字和赋值无关  参数1 是字符 参数2 索引-->
        <li v-for="(char,index) in message">{{char}}:{{index}}</li>
    </ul>

    <hr>
    <ul>
        <li v-for="(msg ,index) in messages" :key="index">{{msg}}:{{index}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(val,attr) in user">{{attr}}:{{val}}</li>
    </ul>

    <hr>

    <table width="80%" border="1px" cellspacing="0">
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>年龄</th>
        </tr>
        <tr v-for="user in users">
            <td v-for="(val,attr) in user" :key="attr">{{val}}</td>
        </tr>
    </table>
</div>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            message:"hello",
            messages:[
                'tom','jack',"zhangsan","lisi"
            ],
            user:{
                username:'tom',
                password:'123456',
                age:20
            },
            users:[
                {
                    username:'tom',
                    password:'123456',
                    age:20
                },
                {
                    username:'tom',
                    password:'123456',
                    age:20
                },
                {
                    username:'tom',
                    password:'123456',
                    age:20
                },
                {
                    username:'tom',
                    password:'123456',
                    age:20
                },
                {
                    username:'tom',
                    password:'123456',
                    age:20
                },
                {
                    username:'tom',
                    password:'123456',
                    age:20
                }
            ]

        },
        methods:{}
      })
</script>
</body>
</html>
